<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>



    <div class="panel-group2">
      <div class="center mt_40">
        <div class="title center">更新日志</div>
      </div>

      <div class="center">
        <div style="width: 80%;">
          <el-row :gutter="20" style="margin-top: 40px;">

            <el-col :span="6" class="center" style="border-right: 1px solid #979797;" v-if="downData.length>0">
              <div>

                <div class="row_a_c">
                  <img class="xztp mr10" src="../../assets/images/xzjt.png" />
                  <div class="f18 ">引擎下载</div>
                </div>

                <div class="container cursor" @click="downloadFile(downData[0].url)">
                  <img class="bu" src="../../assets/images/bu.png" />
                  <div class="text">引擎下载</div>
                </div>

                <div class="f_14 mt_10">安装包大小:({{downData[0].package_size}})</div>



                <div class=" mt_10  row">
                  <div class="row_a_c">
                    <div class="f_14 mr10 ">MD5:</div>
                    <el-tooltip class="item" effect="dark" :content="downData[0].package_md5" placement="top">
                      <el-button size="mini" @click.stop="copyUrl(downData[0].package_md5)">文件MD5</el-button>
                    </el-tooltip>
                  </div>
                </div>

                <div class="mt_10">更新时间:{{downData[0].update_time}}</div>
              </div>
            </el-col>



            <el-col :span="6" class="center" style="border-right: 1px solid #979797;" v-if="downData.length>0">
              <div>

                <div class="row_a_c">
                  <img class="xztp mr10" src="../../assets/images/xzjt.png" />
                  <div class="f18 ">配套版本下载</div>
                </div>

                <div class="container cursor" @click="downloadFile(downData[1].url)">
                  <img class="bu" src="../../assets/images/bu.png" />
                  <div class="text">版本下载</div>
                </div>

                <div class="f_14 mt_10">安装包大小:({{downData[1].package_size}})</div>



                <div class=" mt_10  row">
                  <div class="row_a_c">
                    <div class="f_14 mr10 ">MD5:</div>
                    <el-tooltip class="item" effect="dark" :content="downData[1].package_md5" placement="top">
                      <el-button size="mini" @click.stop="copyUrl(downData[1].package_md5)">文件MD5</el-button>
                    </el-tooltip>
                  </div>
                </div>

                <div class="mt_10">更新时间:{{downData[1].update_time}}</div>
              </div>
            </el-col>



            <el-col :span="6" class="center" style="border-right: 1px solid #979797;" v-if="downData.length>0">
              <div>
                <div class="row_a_c">
                  <img class="xztp mr10" src="../../assets/images/xzjt.png" />
                  <div class="f18 ">客户端下载(演示)</div>
                </div>

                <div class="container cursor" @click="downloadFile(downData[2].url)">
                  <img class="bu" src="../../assets/images/bu.png" />
                  <div class="text" style="white-space: nowrap;">下载工具服</div>
                </div>

                <div class="f_14 mt_10">安装包大小:({{downData[2].package_size}})</div>



                <div class=" mt_10  row">
                  <div class="row_a_c">
                    <div class="f_14 mr10 ">MD5:</div>
                    <el-tooltip class="item" effect="dark" :content="downData[2].package_md5" placement="top">
                      <el-button size="mini" @click.stop="copyUrl(downData[2].package_md5)">文件MD5</el-button>
                    </el-tooltip>
                  </div>
                </div>

                <div class="mt_10">更新时间:{{downData[2].update_time}}</div>
              </div>
            </el-col>



            <el-col :span="6" class="center" v-if="downData.length>0">

              <div>
                <div class="row_a_c">
                  <img class="xztp mr10" src="../../assets/images/xzjt.png" />
                  <div class="f18 ">客户端下载(演示)</div>
                </div>
                <div class="container cursor" @click="downloadFile(downData[3].url)">
                  <img class="bu" src="../../assets/images/bu.png" />
                  <div class="text" style="white-space: nowrap;">下载Android端</div>
                </div>
                <div class="f_14 mt_10">安装包大小:({{downData[3].package_size}})</div>

                <div class=" mt_10  row">
                  <div class="row_a_c">
                    <div class="f_14 mr10 ">MD5:</div>
                    <el-tooltip class="item" effect="dark" :content="downData[3].package_md5" placement="top">
                      <el-button size="mini" @click.stop="copyUrl(downData[3].package_md5)">文件MD5</el-button>
                    </el-tooltip>
                  </div>
                </div>

                <div class="mt_10">更新时间:{{downData[3].update_time}}</div>
              </div>

            </el-col>


          </el-row>

        </div>
      </div>

      <div class="xiana"></div>


      <el-row :gutter="24" v-if="downData.length>0">
        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="4">
          <div class="lef">
            <div v-for="(item, index) in List" :key="index" :class="{ timez: item.active }" class="timek cursor row_a_c" @click="toggleStyle(item,index)">
              <div style="width: 20px;">
                <div v-if="item.active" class="xdd"></div>
              </div>
              <div>{{item.dateTime}}</div>
            </div>
          </div>
        </el-col>

        <el-col :span="1">
          <div class="xianb"></div>
        </el-col>

        <el-col :xs="17" :sm="17" :md="17" :lg="17" :xl="19">
          <div class="scroll-container">
            <div v-for="(itemb, indexb) in List" :key="indexb+ new Date().getTime()" class="rigt" :class="{ rigtt: itemb.active }">
              <div :ref="getRef(indexb)">

                <div class="row_a_c">

                  <div style="width: 180px;white-space: nowrap;margin-bottom: 10px;font-size: 30px;">
                    {{itemb.dateTime}}
                  </div>

                  <div v-if="itemb.active" :style="{color:itemb.subhead_color}" style="min-width: 200px;white-space: nowrap;margin-bottom: 20px;font-size: 28px;">
                    {{itemb.title}}
                  </div>


                  <div v-else style="min-width: 200px;white-space: nowrap;margin-bottom: 10px;font-size: 28px;">
                    {{itemb.title}}
                  </div>

                </div>

                <div style="margin-top: -15px;" v-html="itemb.content"></div>






              </div>
            </div>
          </div>
        </el-col>
      </el-row>

    </div>






  </div>
</template>

<script>
  import CountTo from 'vue-count-to';
  import Cookies from 'js-cookie';
  import Vue from 'vue';

  import Navvz from '@/components/Navvz';

  import * as UpdateLog from '@/api/system/update_log';


  export default {
    name: 'Index',
    components: {
      Navvz,
    },
    data() {
      return {
        downData: [], //下载数据
        container: null,
        List: [],
        coent: '',
        loading: false,
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10,
        },

      };
    },
    filters: {
      truncate(value) {
        if (value.length > 10) {
          return '...' + value.slice(-10);
        } else {
          return value;
        }
      }
    },
    created() {
      this.getDownloadList();
      this.getList();

    },
    mounted() {


    },
    methods: {
      downloadFile(url) {
        window.open(url);
      },
      //复制
      copyUrl(data) {
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '已成功复制到剪切板',
          type: 'success'
        });
        oInput.remove()
      },

      getRef(index) {
        return 'container' + index; // 根据索引生成唯一的引用名称
      },

      toggleStyle(item, index) {
        this.List.forEach(i => {
          i.active = false; // 将所有元素的 active 属性设为 false
        });
        item.active = true; // 将点击的元素的 active 属性设为 true
        this.coent = item.content;
        const refName = 'container' + index;
        this.container = this.$refs[refName][0];
        this.container.scrollIntoView({
          behavior: 'smooth',
          // behavior: 'instant',
          block: 'center'
        });
      },

      getList() {
        this.loading = true;
        UpdateLog.getList(this.queryParams).then(response => {
          if (response.data.rows) {
            this.coent = response.data.rows[0].content;
            this.List = response.data.rows.map((item, index) => {
              return {
                ...item,
                active: index === 0 ? true : false // 设置第一个元素的 active 属性为 true，其他元素的 active 属性为 false
              };
            });
          }
          this.loading = false;
        });
      },

      /** 下载配置列表列表 */
      async getDownloadList() {
        var per = {};
        per.type_pj = 1
        // per.type = 1
        this.loading = true;
        await UpdateLog.getDownloadList(per).then(response => {
          console.log('aabbcc', response.data)
          this.downData = response.data.list;
          // this.total = response.data.pagination.totalCount;
          this.loading = false;
        });
      },


    }
  };
</script>
<style>
  p {
    margin-bottom: -15px !important;
  }
</style>

<style lang="scss" scoped>
  .panel-group2 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 1100px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .scroll-container {
    height: 900px;
    /* 设置容器的固定高度 */
    overflow-y: auto;
    margin-bottom: 10px;
    /* 添加垂直滚动条 */
  }

  .title {
    width: 360px;
    height: 56px;
    background: #3FC1C9;
    border-radius: 8px;
    font-size: 26px;
    color: #FFFFFF;
  }

  .xdd {
    margin-right: 10px;
    width: 10px;
    height: 10px;
    background: #3FC1C9;
    border-radius: 50%;
  }

  .xiana {
    width: 100%;
    height: 1px;
    background: #E7E7E7;
    margin-top: 50px;
  }

  .xianb {
    width: 1px;
    height: 800px;
    background: #E7E7E7;
  }

  .timez {

    color: #3FC1C9 !important;
    // color: #10868d !important;

  }


  .timezf {
    color: red;
    // color: #1890ff !important;

  }

  .timek {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #000000;
    margin-bottom: 20px;
  }

  .lef {
    // background: darkred;
    padding: 50px;
  }

  .rigt {
    padding: 50px;
  }


  .rigtt {
    padding: 50px;
    border: 1px solid #3FC1C9;
    border-radius: 6px;
  }

  .xztp {
    width: 18px;
    height: 17px;
  }

  .bu {
    width: 155px;
    height: 45px;
  }

  .container {
    position: relative;
    display: inline-block;
    margin-top: 13px;

  }

  .text {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: center;
  }

  .xixi {
    width: 1px;
    height: 160px;
    background: #979797;
  }



  .ellipsis {
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // width: 120px;


    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 120px;

  }
</style>